<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	<title>面向对面轮播图</title>
	        <style type="text/css">
	            *{
	                margin: 0;
	                padding: 0;
	            }
	
	            #box{
	                position: relative;
	                width: 760px;
	                height: 440px;
	                overflow: hidden;
	                margin: 20px auto;
	            }
	            #list{
	                width: 2500px;
	                position: absolute;
	                left: 0;
	                top: 0;
	            }
	            #list li{
	                list-style: none;
	                float: left;
	            }
	            #list li img{
	                width: 760px;
	                height: 440px;
	            }
	            #prev{
					font-size: 46px;
	                position: absolute;
	                left: 0;
	                top: 45%;
	                color: #FFFFFF;
	                background: rgba(0,0,0,0.6);
	            }
	            #next{
	                position: absolute;
	                right: 0;
	               font-size: 46px;
	               top: 45%;
	                color: #FFFFFF;
	                background: rgba(0,0,0,0.6);
	            }
	            #box span{
	                cursor: pointer;
	            }
	            #dots{
	                position: absolute;
	                left: 50%;
	                bottom: 10px;
	                margin-left: -30px;
	            }
	            #dots li{
	                list-style: none;
	                float: left;
	                margin-right: 10px;
	                width: 10px;
	                height: 10px;
	                border-radius: 50%;
	                border: 1px solid #FFFFFF;
	                background: rgba(0,0,0,0.5);
	                cursor: pointer;
	            }
	            #dots li.cur{
	                background: #FFFFFF;
	            }
	        </style>
	    </head>
	    <body>
	        <div id="box">
	            <ul id="list">
	                <li><img src="img/1.jpg" alt="" /></li>
	                <li><img src="img/2.jpg" alt="" /></li>
	                <li><img src="img/3.jpg" alt="" /></li>
	            </ul>
	            <ul id="dots">
	                <li class="cur"></li>
	                <li></li>
	                <li></li>
	            </ul>
	            <span id="prev">&lt</span>
	            <span id="next">&gt</span>
	        </div>
	<script>
	           window.onload = function(){
	            //new一个轮播图对象                
	                var box = new kdg('box');
	                box.init();
	                window.onblur = function(){
	                    //页面失去焦点后停止自动播放，防止计时出现错误，造成错乱
	                    clearInterval(box.timer2);
	                }
	                window.onfocus = function(){
	                    //回到页面再重新运行代码
	                    box.init();
	                }
	            }
			//定义 对象构造函数
	          function kdg(id){
	                this.odiv = document.getElementById(id);
	                this.ul1 = document.getElementById('list');
	                this.prev = document.getElementById('prev');
	                this.next = document.getElementById('next');
	                this.li1 = this.oul1.getElementsByTagName('li');
	                this.ul2 = document.getElementById('dots');
	                this.li2 = this.oul2.getElementsByTagName('li');
					//图片宽度
					this.width = this.li1[0].offsetWidth;
					//图片数量
					this.imgs = this.li1.length;
					//校园点数
					this.dots = this.li2.length;
					//图片下标
					this.num = 1;
					//过渡---定时器
					this.timer = null;
					//自动播放定时器
					this.timer2 = null;
					//判断过度效果执行是否完成开关
					this.stop = true;
            }

</script>

</body>
</html>